<template>
  <div class="boby_zfm">
    <div id="box1">
        <div id="giakuo">
            <div id="yuanzhu"></div>
            <p>数据概况</p>
        </div>

        <div id="changedate">
            <span>选择日期范围</span>
            <el-date-picker
                v-model="value2"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                style="margin-left:10px"
                >
            </el-date-picker>
        </div>

        <div id="ecs">
            <div id="tuxing">
                <div>
                    <p>数据概况</p>
                    <zxt></zxt>
                </div>
                <div id="folder">
                    <el-table
                        :data="tableData"
                        stripe
                        style="width: 100%">
                        <el-table-column
                        prop="newData"
                        label="新增数据类型"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        label="2021-01-04"
                        prop="one"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="two"
                        label="2021-01-05">
                        </el-table-column>
                        <el-table-column
                        prop="three"
                        label="2021-01-06">
                        </el-table-column>
                        <el-table-column
                        prop="four"
                        label="2021-01-07">
                        </el-table-column>
                        <el-table-column
                        prop="five"
                        label="2021-01-08">
                        </el-table-column>
                        <el-table-column
                        prop="six"
                        label="2021-01-09">
                        </el-table-column>
                    <el-table-column
                        prop="seven"
                        label="2021-01-09">
                        </el-table-column>
                       
                      </el-table>
                    
                </div>
            </div>
            <div id="yuanxingtu">
                <div class="yuandiv one">
                    <p>居民年龄构成</p>
                    <age class="education"></age>
                </div>
                <div class="yuandiv two">
                    <p>居民学历构成</p>
                    <education class="education"></education>
                </div>
                <div class="yuandiv three">
                    <p>居民性别构成</p>
                    <sex class="education"></sex>
                </div>
            </div>
            <div id="finally">
                <div id="juming">
                    <jm></jm>
                </div>
                <div id="server">
                    <p>服务包使用情况</p>
                    <serve></serve>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import age from "@/components/Data/Age.vue";
import education from "@/components/Data/Education.vue";
import sex from "@/components/Data/Sex.vue";
import serve from "@/components/Data/Serve.vue";
import zxt from "@/components/Data/zxt.vue";
import jm from "@/components/Home/Residents.vue";
export default {
  components: {
    age,
    education,
    sex,
    serve,
    zxt,
    jm,
  },
  data() {
    return {
      tableData: [
        {
          newData: "新增居民数量",
          one: "5",
          two: "1",
          three: "3",
          four: "4",
          five: "12",
          six: "10",
          seven: "5",
        },
        {
          newData: "新增签约数量",
          one: "7",
          two: "9",
          three: "2",
          four: "6",
          five: "3",
          six: "2",
          seven: "0",
        },
        {
          newData: "新增服务数量",
          one: "2",
          two: "4",
          three: "7",
          four: "6",
          five: "4",
          six: "2",
          seven: "9",
        },
        {
          newData: "合计",
          one: "7",
          two: "10",
          three: "1",
          four: "4",
          five: "4",
          six: "3",
          seven: "8",
        },
        {
          newData: "团队A",
          one: "1",
          two: "4",
          three: "7",
          four: "8",
          five: "2",
          six: "4",
          seven:"6",
        },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "",
      
    };
  },
  methods: {
    format() {
      return "411";
    },
    
  },
};
</script>

<style>
.education {
  margin-left: 17px;
}
* {
  margin: 0;
  padding: 0;
}
.boby_zfm {
  background: #f2f7fa;
}
#box1 {
  width: 1150px;
  height: 2000px;
  margin: 20px auto;
  background: rgb(255, 255, 255);
  position: relative;
  font-family: "PingFangHK-Medium", "PingFang HK Medium", "PingFang HK";
}

#yuanzhu {
  width: 6px;
  height: 20px;
  background-color: #2984f8;
  border-radius: 8px;
  position: absolute;
  top: 20px;
  left: 20px;
}

#giakuo {
  font-size: 18px;
  line-height: 60px;
}

#giakuo p {
  margin-left: 40px;
}

#changedate {
  font-size: 13px;
  color: #999999;
}

#changedate span {
  margin-left: 20px;
}

#ecs {
  width: 1110px;
  height: 1700px;
  background-color: rgba(255, 255, 255, 1);
  margin-left: 20px;
  margin-top: 50px;
}

#tuxing {
  width: 1110px;
  height: 803px;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(242, 242, 242, 1);
  border-radius: 8px;
  box-shadow: 0px 0px 15px rgb(242 242 242);
}

#tuxing:hover {
  box-shadow: none;
}

#yuanxingtu {
  width: 1110px;
  height: 384px;
}

.yuandiv {
  width: 340px;
  height: 384px;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(242, 242, 242, 1);
  border-radius: 8px;
  box-shadow: 0px 0px 15px rgb(242 242 242);
  margin-top: 50px;
}

.one{
    margin-top: 35px;
}

.two {
  position: absolute;
  top: 953px;
  left: 407px;
}

.three {
  position: absolute;
  top: 953px;
  left: 790px;
}

.yuandiv:hover {
  box-shadow: none;
}

.yuandiv p {
  margin-top: 15px;
  margin-left: 10px;
}

#finally {
  width: 1110px;
  height: 384px;
  margin-top: 50px;
}

#juming {
  width: 350px;
  height: 384px;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(242, 242, 242, 1);
  border-radius: 8px;
  box-shadow: 0px 0px 15px rgb(242 242 242);
  padding: 10px;
}

#juming:hover {
  box-shadow: none;
}

#juming p {
  margin-top: 15px;
  margin-left: 10px;
}

#server {
  width: 725px;
  height: 384px;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(242, 242, 242, 1);
  border-radius: 8px;
  box-shadow: 0px 0px 15px rgb(242 242 242);
  position: absolute;
  top: 1438px;
  left: 406px;
  padding: 10px;
}

#server:hover {
  box-shadow: none;
}

#server p {
  margin-top: 15px;
  margin-left: 10px;
}

#tuxing {
  width: 1110px;
  height: 820px;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(242, 242, 242, 1);
  border-radius: 8px;
  box-shadow: 0px 0px 15px rgb(242 242 242);
  padding: 0 10px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 60px;
}
</style>